{% load staticfiles %}
{% load appMonitor_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用监控管理系统</title>
    <script src="/static/jquery-1.12.4.js"></script>
    <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <!--my self add-->
    <style type="text/css">
        /*左侧菜单栏*/
        .side-menu{
            position: absolute;
            top:48px;
            left:0px;
            bottom: 0px;
            width: 200px;
            background-color: #515151;
            color: #adb3b8;
            border: 1px solid #ddd;
            border-radius: 2px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
        }
        .side-menu ul{

        }
        .side-menu ul li{
            list-style: none;

        }

    </style>


    <!--左侧菜单-->
    <div class="side-menu">
        <ul style="padding-left: 0px">
            <li class="title">
                <a class="item item1"><span class="glyphicon glyphicon-chevron-down myarrow ">应用管理系统</span></a>
                {% get_environments as environment_list %}
                <ul class="content">
                    {% for env in environment_list %}
                        <li>
                            <a href="{% url 'appMonitor:host' env.pk %}"><span>{{ env }}</span></a>
                        </li>
                    {% endfor %}
                    <li><a href="{% url 'appMonitor:allEnvAppDiff' %}">各环镜应用启动情况</a></li>
                </ul>
            </li>

            <li class="title">
                <a class="item item1"><h4>Grafana回调系统</h4></a>
                <ul class="content">
                    <li>A组</li>
                    <li>B组</li>
                    <li>C组</li>
                    <li>D组</li>
                    <li>E组</li>
                    <li>F组</li>
                </ul>
            </li>

        </ul>
    </div>


    <!--右侧内容-->
    <div class="side-content">
    <!--此环镜IT基础设施(如主机、数据库)信息：-->
        {#        {% include "./appMonitor/include/envHostInfo.html" %}#}
        {% block envhostinfo %}
        {% endblock %}

    <!--此环镜每台主机上运行的应用信息-->
        {% block envhostappinfo %}
        {% endblock %}

    </div>

    <script type="text/javascript">
        $(".title .item1").click(function(){
            $(this).next(".content").slideToggle();//实现二级菜单的展开收缩功能
            $(this).find("span").toggleClass("glyphicon glyphicon-chevron-down");//实现菜单点击时图标的转换效果
            $(this).find("span").toggleClass("glyphicon glyphicon-chevron-right");
        })
    </script>

</body>
</html>